<template>
    <el-container style="height: 100%;" class="father">
        <el-header style="padding: 0px;height: 40px">
            <Nav></Nav>
        </el-header>
        <el-container style="height: 100%;width: 100%;margin-top: 40px">
            <el-aside :style="'width:'+ widthNum + 'px;'">
                <left-menu/>
            </el-aside>
            <el-container class="center">
                <router-view></router-view>
            </el-container>
        </el-container>
        <!--         <el-footer>-->

        <!--         </el-footer>-->
    </el-container>
</template>

<script>
    import Nav from "../components/admin/menu/Nav";
    import LeftMenu from "../components/admin/menu/LeftMenu";
    import bus from "../components/admin/util/bus";

    export default {
        name: "Administrator",
        data() {
            return {
                url: '',
                userNickname: '',
                subPath: '',
                widthNum: 180
            }
        },
        components: {
            LeftMenu,
            Nav,
        },
        watch: {//使用watch 监听$router的变化
            $route(to, from) {
                //如果to索引大于from索引,判断为前进状态,反之则为后退状态
                // if (to.meta.index > from.meta.index) {
                //设置动画名称
                this.transitionName = 'slide-left';
                // } else {
                //     this.transitionName = 'slide-right';
                // }
            }
        },
        model: {},
        methods: {},
        computed: {
            // widthChange:
        },
        created() {
            if (this.$store.state.user === null) {
                this.$router.push({name: "AdminLogin"})
            } else {
                this.userNickname = this.$store.state.accessToken;
                bus.$on("collapse", msg => {
                    if (!msg) {
                        this.widthNum = 180;
                    } else {
                        this.widthNum = 49;
                    }
                });
            }
        }
    }
</script>
<style>
    .slide-left-enter-active,
    .slide-left-leave-active {
        will-change: transform;
        transition: all 500ms;
        position: absolute;
    }

    .slide-left-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    .slide-left-leave-active {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
</style>

<style scoped>
    .father > .el-header {
        position: fixed;
        z-index: 10;
        width: 100%;
    }

    .el-aside {
        border: none;
        background-color: #F0F0F0;
        color: #333;
    }

    * {
        transition: all 1s;
        height: 100%;
    }

    .el-main {
        background-color: #d6ab66;
        border: #8f754f 3px solid;
        color: #333;
        text-align: center;
    }
</style>
